
<template>

  <div class="shop" v-loading='loading'>
    <div class="header">
      <div>
        <el-button v-if="hasBtn('30101')" type="primary" size="mini" @click="handleExport">导出数据</el-button>
      </div>
      <!-- <FormSearch
        ref="formSearch"
        :forms="searchForm"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      /> -->
      <el-form
      ref="from"
      :model="query"
      :inline="true"
    >
    <el-form-item label="" >
      <el-date-picker

          v-model="rongDate"
          size="mini"
          clearable
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :type="'datetimerange'"
          :format="'yyyy-MM-dd HH:mm:ss'"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
        />
    </el-form-item>
     

      <el-form-item label="" >
        <el-select
         
          v-model="query.orderStatus"
          size="mini"
          clearable
          placeholder="请选择订单状态"
        >
          <el-option  label="待支付" :value="1" />
          <el-option  label="已支付待核销" :value="5" />
          <el-option  label="已核销（已完成）" :value="10" />
          <el-option  label="已取消（订单未支付）" :value="15" />
          <el-option  label="已失效（关闭）" :value="20" />
        </el-select>
      </el-form-item>
      <el-form-item label="" >
        <el-select
         
          v-model="query.orderType"
          size="mini"
          clearable
          placeholder="选择收益类型"
        >
          <!-- <el-option  label="请选择" :value="0" /> -->
          <el-option  label="小店买单（优惠买单）" :value="4" />
          <el-option  label="小店商品" :value="5" />
          <el-option  label="红包充值 " :value="20" />
          <el-option  label="平台商品" :value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="" ><el-input  v-model="query.sellerId" size="mini" clearable placeholder="请输入小店账号" /></el-form-item>
      <el-form-item label="" ><el-input  v-model="query.mobile" size="mini" clearable placeholder="请输入购买人账号" /></el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    <el-table
      class="table-box"
      :data="tableData"
      style="width:100%"
      :max-height="screenHight"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
    <el-table-column label="创建时间">
      <template slot-scope="scope">
       <span> {{parseTime(scope.row.createdAt)}}</span>
      </template>
    </el-table-column>

      <el-table-column prop="order_type" label="订单类型"></el-table-column>
      <el-table-column prop="payAmount" label="交易金额(元)"></el-table-column>
      <el-table-column prop="commission" label="预估收益(元)"></el-table-column>
      <el-table-column prop="actualCommission" label="结算收益(元)"></el-table-column>
      <el-table-column prop="orderNo" label="订单号"></el-table-column>
      <el-table-column prop="shopName" label="所属小店">
      </el-table-column>
      <el-table-column prop="buyName" label="购买用户"></el-table-column>
      <el-table-column prop="commissionStatusText" label="结算状态"></el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <span class="text">
          已结算收益：￥{{ settle_revenue }}, 未结算预估收益: ￥{{ unsettle_revenue }}
        </span>
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          :page-sizes="[20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import FormSearch from '@/components/FormSearch'
import { API_BASE_URL } from '@/config'
import { platformOrders, getIncomesStatistic } from '@/api/myProfit'
export default {
  components: {
    // FormSearch
  },
  data() {
    return {
      loading:false,
      total: 0,
      createTime: [],
      tableData: [],
      unsettle_revenue: 0, // 未结算收益
      settle_revenue: 0, // 已结算收益
      searchForm: {
        form: [
          {
            type: 'datePicker',
            rangeType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            key: 'createTime',
            label: '创建时间:'
          },
          {
            type: 'select',
            key: 'status',
            placeholder: '请选择结算状态',
            options: [
              {
                label: '待收益',
                value: '0'
              },
              {
                label: '已收益',
                value: '1'
              },
              {
                label: '已失效',
                value: '2'
              }
            ]
          },
          {
            type: 'select',
            key: 'order_type',
            placeholder: '请选择订单类型',
            options: [
              {
                label: '优惠买单',
                value: '20'
              },
              {
                label: '会员充值',
                value: '30'
              },
              {
                label: '会员续费充值',
                value: '31'
              },
              {
                label: '红包充值',
                value: '50'
              }
            ]
          },
          {
            type: 'input',
            key: 'shop_user_mobile',
            placeholder: '请输入小店账号',
          },
          {
            type: 'input',
            key: 'order_user_mobile',
            placeholder: '请输入用户购买用户'
          }
        ]
      },
      page: 1,
      size: 20,
      form: {},
      rongDate:[],
      query:{
        pageNum:1,
        pageSize:20,
            /**
           * 订单创建开始时间
           */
          beginTime:'',
          /**
           * 佣金状态 2：未结算 3：已结算 4：已失效
           */
          commissionStatus:0,
          /**
           * 订单创建结束时间
           */
          endTime:'',
          /**
           * 搜索
           */
          keyword:'',
          /**
           * 购买用户ID
           */
          memberId:0,
          /**
           * 购买用户账号
           */
          mobile:'',
          /**
           * 订单编号
           */
          orderNo:'',
          /**
           * 订单状态 1待支付 5：已支付待核销 10：已核销（已完成）15：已取消（订单未支付）20：已失效（关闭）
           */
          orderStatus:undefined,
          /**
           * 订单类型（收益类型） 4小店买单（优惠买单） 5小店商品 20红包充值 6平台商品
           */
          orderType:undefined,

          /**
           * 合伙人id
           */
          partnerId:sessionStorage.getItem('partnerId'),
          /**
           * 分销平台
           * TAOBAO :TAOBAO
           * JDCOM :JDCOM
           * PINDUODUO :PINDUODUO
           * VIPSHOP :VIPSHOP
           */
          platform:undefined,
          /**
           * 小店id
           */
          sellerId:undefined,
          /**
           * 服务经理账号
           */
          serviceMobile:'',

      },
    };
  },
  created(){
    this.getData()
    // this.getStatistic({})
  },
  methods: {
    getData() {
      platformOrders(this.query).then(res => {
        if (res.code === 200) {
          // if (params.is_export === 1) {
          // window.open(
          //   `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
          // )
          // } else {
          //   res.data.data.forEach(item => {
          //     item.order_type = item.order_type === 20 ? '优惠买单' : item.order_type === 30 ? "会员充值" : item.order_type === 31 ? '会员续费充值' : '红包充值'
          //     item.status = item.status === 0 ? '待收益' : item.status === 1 ? "已收益" : item.status === 2 ? '已失效' : '冻结中'
          //   })
            this.tableData = res.data.list
            this.total = res.data.total
          // }
        } else {
        this.$message.error(res.message)
        }
      })
    },
    getStatistic(param) {
      const params = {
        type: 1,
        ...param
      }
      getIncomesStatistic(params).then(res => {
        if(res.code === 10000) {
          this.unsettle_revenue = res.data.unsettle_revenue
          this.settle_revenue = res.data.settle_revenue
        }
      })
    },
    handleSearch(formValue) {
      this.query.pageNum = 1
      console.log(this.rongDate)
      if (this.rongDate.length) {
        this.query.beginTime = this.rongDate[0]+''
        this.query.endTime = this.rongDate[1]+''
        // delete formValue.createTime
      }
      // if (formValue.createTime) {
      //   formValue.start_time = formValue.createTime[0]
      //   formValue.end_time = formValue.createTime[1]
      //   delete formValue.createTime
      // }
      // this.form = formValue
      // const params = {
      //   ...formValue,
      //   page: this.page
      // }
      // const statisticParams = {
      //   ...formValue
      // }
      this.getData()
      // this.getStatistic()
    },
    handleReset() {
     this.query.pageNum = 1
    //  this.form = {}
    //  const params = {
    //     page: this.page
    //   }
      this.getData()
      // this.getStatistic({})
    },
    pageChange(page) {
      this.query.pageNum = page
      // const params = {
      //   page: page,
      //   ...this.form
      // }
      // if (params.createTime) {
      //   params.start_time = params.createTime[0]
      //   params.end_time = params.createTime[1]
      //   delete params.createTime
      // }
      this.getData()
    },
    handleExport() {
      const params = {
        ...this.form,
        is_export: 1
      }
      this.getData(params)
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  position: relative;
  background-color: #fff;
  height: 100%;
  padding: 10px 20px 0 ;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
  }
  .table-box {
      height: calc(100vh - 220px);
    }
  .pagination {
    display: flex;
    width: 97%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 99;
    .text {
      color: #666
    }
  }
}
</style>
